let canvas, ctx;

class DrawTool {
    constructor(pNode) {
        canvas = document.createElement('canvas')
        canvas.classList.add('canvas-layer')
        pNode.appendChild(canvas)
        const {offsetWidth, offsetHeight} = pNode
        canvas.width = offsetWidth
        canvas.height = offsetHeight
        ctx = canvas.getContext('2d')
    }

    clear() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
    }

    drawPoint(coords, style = {}) {
        if(coords.length !== 2) throw new Error('参数错误')
        style = Object.assign({
            r: 8,
            fillColor: 'rgba(255,0,0, 0.5)',
            strokeWidth: 3,
            strokeColor: 'red'
        }, style)
        ctx.beginPath()
        ctx.save()
        ctx.strokeStyle = style.strokeColor
        ctx.lineWidth = style.strokeWidth
        ctx.fillStyle = style.fillColor
        const [x, y]  =coords
        ctx.arc(x, y, style.r, 0, Math.PI * 2)
        ctx.fill()
        ctx.stroke()
        ctx.restore()
    }


    drawLine(coords = [], style = {}) {
        if(coords.length < 2) throw new Error('参数错误')
        style = Object.assign({
            strokeWidth: 3,
            strokeColor: 'red'
        }, style)
        ctx.beginPath()
        ctx.save()
        ctx.strokeStyle = style.strokeColor
        ctx.lineWidth = style.strokeWidth
        coords.forEach((coord, index) => {
            const [x, y] = coord
            index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y)
        })
        ctx.stroke()
        ctx.restore()
    }

    drawPolygon(coords = [], style = {}) {
        const isClose = coords[0].join(',') !== coords[coords.length - 1].join(',')
        if(coords.length < 4 && isClose) throw new Error('参数错误')
        style = Object.assign({
            fillColor: 'rgba(255,0,0,0.5)',
            strokeWidth: 3,
            strokeColor: 'red'
        }, style)
        ctx.beginPath()
        ctx.save()
        ctx.strokeStyle = style.strokeColor
        ctx.lineWidth = style.strokeWidth
        ctx.fillStyle = style.fillColor
        coords.forEach((coord, index) => {
            const [x, y] = coord
            index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y)
        })
        ctx.closePath()
        ctx.fill()
        ctx.stroke()
        ctx.restore()
    }

    drawImage(coords, img, style = {}) {
        if(coords.length !== 2) throw new Error('参数错误')
        let [x, y] = coords
        style = Object.assign({
            scale: 1.2,
            align: 'center',
            baseLine: 'middle'
        }, style)
        if(typeof img === 'string') {
            const image = new Image()
            image.src = img
            image.onload = () => {
                const {width, height} = image
                if(style.align === 'center') x = x - width / 2
                if(style.align === 'right') x = x - width
                if(style.baseLine === 'middle') y = y - height / 2
                if(style.align === 'bottom') y = x - width
                ctx.drawImage(image, x, y, width * style.scale, height * style.scale)
            }
        }
         else {
            const {width, height} = img
            ctx.drawImage(img, x, y, width * style.scale, height * style.scale)
        }
    }

    drawText(coords, text, style ={}) {
        if(coords.length !== 2 || text === '') throw new Error('参数错误')
        style = Object.assign({
            fillColor: 'rgba(255,0,0,0.5)',
            strokeWidth: 1,
            strokeColor: 'blue',
            textAlign: 'center',
            textBaseline: 'middle',
            font: '30px Arial'
        }, style)
        ctx.beginPath()
        ctx.save()
        ctx.strokeStyle = style.strokeColor
        ctx.lineWidth = style.strokeWidth
        ctx.fillStyle = style.fillColor
        ctx.textAlign = style.textAlign
        ctx.textBaseline = style.textBaseline
        ctx.font = style.font
        const [x, y] = coords
        ctx.fillText(text, x, y)
        ctx.strokeText(text, x, y)
        ctx.restore()
    }
}
